*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    font-size: 20px;
}
@media screen and (max-width:400px) {
    html{
        font-size: 20px;
    }
}
@media screen and (min-width:400px) {
    html{
        font-size: 25px;
    }
}
.music-page{
    width: 100%;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}
.music-page::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F22d4513ec314686b001cc306ec50ec5c2fd8ebea2730d-1zeeHQ_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638542309&t=07b9b9c8f956c536890e005ea08b8788');
background-size: 100% 100%;
background-repeat: no-repeat;
filter: blur(10px); /*背景图虚化 */
z-index: -1;
}
.music-header{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 30px;
padding: 0 65px 0 59px;
margin: 30px 0 70px 0;
}
.music-header .back{
width: 0.6rem ;
height: 0.6rem;
border: 1px solid #fff;
border-right: none;
border-bottom: none;
transform: rotate(-45deg);

}
.music-header .title{
    flex: 1;
    text-align: center;
    font-size: 0.6rem;
}
.music-content{
width: 100%;
height: calc(100vh - 130px);
background: #fff;
box-shadow: 0 0 10px #aaa;
border-top-left-radius: 32px;
border-top-right-radius: 32px;
/* overflow: hidden; */
display: inline-block;
}
.music-content .pic{
    width: 12.85rem;
    height: 14.15rem;
    overflow: hidden;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-39px);
border-radius: 40px;
box-shadow: 0 5px 10px #aaa;

}
.pic img{
   width: 100%;
}
.music-info{
    margin-top: 14.15rem;
    text-align: center;
}
.music-info .title{
    font-size: 1rem;
    font-family: SourceHanSansCN;
    font-weight: bold;
    color: #000000;
   
}
.music-info .author{
font-size: 0.75rem;
color: #4f4f4f;
}
.slider{
    width: 13rem;
height: 0.1rem;
background: #c6c6c6;
margin: auto;
margin-top: 1rem;
border-radius: 0.2rem;
position: relative;
}
.slider::after{
    content: '';
width: 7rem;
height: 0.1rem;
left: 0%;
background: #f03030;
position: absolute;
}
.time{
    width: 1.6rem;
    height: 0.4rem;
    font-size: 0.5rem;
    font-family: SourceHanSansCN;
    font-weight: bold;
    color: #9EA0AD;
   position: absolute;
}
.time .left{
    position: absolute;
    left: 2.8rem;
}
.time .right{
    position: absolute;
    left:14.4rem;
}
.control-wrap{
    display: flex;
    width: 12.85rem;
    margin: 1rem  auto;
    height: 2.45rem;
    align-items: center;
     justify-content: space-between;/* 以空白隔开*/
}
.control-wrap .icon .iconfont{
    font-size: 1rem;
    color: #8370ab;
}
.control-wrap .icon .iconfont.icon-bofangzanting{
    font-size: 2.5rem;
    color: #f03020;
}